<template>
	<view class="gold-tab">
		<u-navbar title="券出售">
			<view slot="right" class="sell-btn" style="margin-right: 24rpx;" @click="$goto('/pages/coupon/record')">出售记录</view>
		</u-navbar>

		<view class="bg-white flex-row justify-center padding-tb">
			<image src="../../static/images/coupon.png" style="width: 670rpx;" mode="widthFix"></image>
		</view>
		<u-sticky>
			<u-tabs :list="list" is-scroll active-color="#000" :current="current" @change="change"></u-tabs>
		</u-sticky>

		<view>
			<view class="list">
				<my-coupon :type="i.coupon_type.type_class" :amount="i.amount" :threshold="i.threshold" :expire="i.expire_time"
				 btn="出售" v-for="i in list[current].data" :key="i.id" @click="$goto('/pages/coupon/sell-confirm?id=' + i.coupon_sn)"></my-coupon>
			</view>

			<u-loadmore :status="list[current].status" bg-color="#EFF1F4" margin-top="30" margin-bottom="30"></u-loadmore>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '影视券',
					type: 'film',
					page: 1,
					status: 'loadmore',
					data: []
				}, {
					name: '设计券',
					type: 'development',
					page: 1,
					status: 'c',
					data: []
				}, {
					name: '企划券',
					type: 'agent',
					page: 1,
					status: 'loadmore',
					data: []
				}, {
					name: '物料券',
					status: 'loadmore',
					type: 'materials',
					page: 1,
					data: []
				}, {
					name: '服务券',
					type: 'service',
					page: 1,
					status: 'loadmore',
					data: []
				}, {
					name: '通用券',
					type: 'cash',
					page: 1,
					status: 'loadmore',
					data: []
				}],
				current: 0
			}
		},
		onShow() {
			this.getData(true)
		},
		onReachBottom() {
			this.getData()
		},
		methods: {
			change(index) {
				this.current = index;
				this.getData(true)
			},
			getData(clear = false) {
				let current = this.list[this.current]
				if (clear) {
					current.data = []
					current.status = 'loadmore'
				}
				if (current.status == 'nomore') return;

				current.status = 'loading'
				let params = {
					type: current.type,
					page: current.page
				}
				this.$u.get('/coupons/owned', params).then(res => {
					let coupon = res.data.result.coupon
					let {
						last_page,
						data
					} = coupon

					current.data = current.data.concat(coupon.data)
					if (current.page == last_page) {
						current.status = 'nomore'
					} else {
						current.status = 'loadmore'
						current.page++
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.sell-btn {
		padding: 8rpx 32rpx;
		color: #fff;
		border-radius: 4rpx;
		background: linear-gradient(270deg, #FFB27B 0%, #FF7A45 100%);
	}
</style>
